<template>
  <div class="registered">
    <img class="bg" src="../assets/images/bg.png"/>
    <div class="placeHolderTextContainer">FAST</div>
    <div class="backButton">
      <img style="height: .8rem;width: .8rem" src="../assets/images/back_icon.png"/>
    </div>
    <div class="headerTitleText">REGISTER</div>
    <div class="bodyContainer2">
      <input class="textInput" type="text" placeholder='USERNAME' />
      <input class="textInput" type="email" placeholder='EMAIL' />
      <input class="textInput" type="password" placeholder='PASSWORD' />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Registered2'
  };
</script>

<style lang="less">
.registered{
  width:100%;
  height:100%;
  position:fixed;
  /*z-index:-10;*/
  .bg{
    width:100%;
    height:100%;
    position:absolute;
    right: 0;
    z-index:-10;
  }
  .placeHolderTextContainer {
    position: absolute;
    font-family: Dreamscape;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    transform: rotate(-90deg);
    bottom: 22%;
    right: -28%;
    z-index: -1;
  }
}
.backButton {
  text-align: left;
  margin-left: .6rem;
  margin-top: .6rem;
}
.headerTitleText {
  text-align: left;
  color: white;
  font-family: Nunito-Regular;
  font-size: 1.5rem;
  margin-left: .6rem;
  margin-top: .6rem;
}
.bodyContainer2 {
  text-align: left;
  margin-left: .6rem;
  margin-top: .5rem;
  input {
    color: white;
    margin-top: 1rem;
    font-family: Nunito-Light !important;
    font-size: .5rem;
    width: 80% !important;
    height: 1rem !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 4px solid white !important;
    padding-bottom: 0.6rem !important;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: white;
  }
}
</style>
